<template>
	<view class="control">
		<view class="" style="width: 100%;height: 60rpx;background-color: #0E9698;color: #ffffff;line-height: 60rpx;padding-left: 20rpx;">
			下单后请60秒内完成支付
		</view>
		<view class="" style="padding: 0 30rpx;">
			<!-- <view class="section-1">
				<view class="tab-con">
					<view class="tab-item1 addressItem" @click="addresslist"
						v-if="consignee.consigneeAddress != ''&&consignee.consigneeAddress">
						<image class="address" src="https://niule.qfycloud.com/images/icon_6.png" mode=""></image>
						<view class="address-content">
							<view class="flex-between" style="padding-top: 25rpx;">
								<view class="adress">{{consignee.consigneeAddress}}</view>
								<u-icon name="arrow-right" color="#dbdbdb" size="14"></u-icon>
							</view>
							<view class="flex-align info">
								<view>{{consignee.consigneeName}}</view>
								<view>{{consignee.consigneeTel}}</view>
							</view>
						</view>

					</view>
					<view class="tab-item1" @click="addresslist" v-else>
						<view class="flex-between" style="padding-top: 25rpx;">
							<view class="adress">选择地址</view>
							<u-icon name="arrow-right" color="#dbdbdb" size="14"></u-icon>
						</view>

					</view>
				</view>
			</view> -->

			<view class="section-2">
				<view class="" style="margin-top: 20rpx;border-bottom: 1px solid #efefef;">
					<!-- 	<view class="flex-between goods">
						<view class="flex-align con">
							<view class="image">
								<u-image :src="pic"	width="160rpx" height="160rpx" radius="5"></u-image>
							</view>
							<view class="info">
								<view class="section-x flex-between">
									<view class="info-1">{{inProductlist.productName}}</view>
									<view class="info-2" style="text-align: right;">
										￥<text>{{inProductlist.price}}</text></view>
								</view>
								<view class="section-x flex-between">
									<view class="info-1" style="color: #9E9E9E;"></view>
									<view class="info-2" style="color: #9E9E9E;"><text> X1</text></view>
								</view>
							</view>
						</view>
					</view> -->
					<view class="goods-detail">
						<image class="goods-img" :src="card_img" mode=""></image>
						<view class="goods-right">
							<view class="goods-right-info">
								<view class="goods-top">
									{{list.venuelist.venue_name}}
								</view>
								<view class="goods-pecs">
									{{list.card_name}}
								</view>
							</view>
							<view class="goods-right-price">
								<view class="price">
									￥<text>{{list.price}}</text>
								</view>
								<view class="goods-num">
									x{{total}}
								</view>
							</view>
						</view>
					</view>
					<view class="section-3x flex-between">
						<view class="info-1"></view>
						<view class="info-2">
							<!-- <u-number-box v-model="num">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 40px;text-align: center;" class="input">{{num}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box> -->
						</view>
					</view>
				</view>

				<!-- <view class="section-4x flex-between">
					<view class="info-1">配送服务</view>
					<view class="info-2">
						<text> 商家包邮</text>
					</view>
				</view> -->
				<view class="section-5x flex-between">
					<view class="info-1">开具发票</view>
					<view class="info-2 flex-align">
						<view class="info-3">本次不开具发票</view>
						<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
					</view>
				</view>
				<view class="section-5x flex-between">
					<view class="info-1">订单备注</view>
				</view>
				<view style="width: 100%; height: 120rpx;background: #F6F6F6; padding: 20rpx 30rpx; font-size:26rpx ;">
					<textarea placeholder="付款后商家可见" height="60rpx" margin-top='20rpx'
						placeholder-style="font-size: 26rpx" v-model="order_remarks" />
				</view>
			</view>



			<view class="section-4m flex-between">
				<view class="info-1">商品总价：</view>
				<view class="info-2">
					￥<text>{{totalmoney}}</text>
				</view>
			</view>
			<view class="section-5m flex-between">
				<view class="info-1">
					办卡后是否立即使用
				</view>
				<!-- <view class="info-2" style="color: black;" v-if="moneyReductionLedou != 0">
					<text>可抵扣{{moneyReductionLedou}}元</text>
				</view> -->
			</view>
			<view class="section-5m flex-between" style="padding: 10rpx 30rpx;">
				<view class="item">
					<view class="flex-space-between week-list">
						<view class="week-item" :class="{'active':index === selectItemId}"
							v-for="(item,index) in noticeList" :key="index" @click="noticesSelect(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- <view class="info-2" style="color: black;" v-if="moneyReductionLedou != 0">
					<text>可抵扣{{moneyReductionLedou}}元</text>
				</view> -->
			</view>
			<view class="section-3m flex-between">
				<view class="info-1">支付方式</view>
				<view class="info-2">
					<text>共{{total}}件商品</text>
				</view>
			</view>
			<view class="form" style="margin-top: 20rpx;">
				<radio-group @change='change1'>
					<label class="item flex-align" v-for="(item,index) in payList" :key="index">
						<image mode="aspectFit" :src="item.smallimage"></image>
						<view class="flex-between item-con">
							<text>{{item.pay_name}}</text>
							<radio :value="index" color="#0E9698" :checked="index == 0 ? true : false"
								@change="radioChange(item)" />
						</view>
					</label>
				</radio-group>
			</view>
			<!--优惠卷 -->
			<!-- <view class="section-5f flex-between" @click="showCoupons = true" >
				<view class="info-1">选择优惠券</view>
				<view class="info-2 flex-align" v-if="couponName != ''">
					<view class="info-3">{{couponName}}</view>
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view>
				<view class="info-2 flex-align" v-else>
					<view class="info-3">{{outMemberlength}}张可选</view>
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view>
			</view> -->

			<view class=""
				style="position: absolute;background: rgba(0,0,0,0.6);width: 100%;height: 100%;z-index: 998;top: 0;left: 0;"
				v-if="onclickin"></view>
			<view class="scrolllist" v-if="onclickin">
				<view class="toubu">用户协议与法律声明</view>
				<scroll-view scroll-y="true" class="scroll">
					<!-- <view class="lingqu"></view> -->
					<view class="xiangqing">
						<u-parse :content="list.user_content"></u-parse>
						<!-- {{list.user_content}} -->
					</view>
					<view class="fanhui" @click="onclickfh">
						我已知晓
					</view>
				</scroll-view>

			</view>
			<view class="footer flex-between" style="justify-content: flex-end;">
				<view class="footer-1 flex-align" style="margin-right:12upx">

					<view class="info">
						<view class="info_info" style="text-align: right;"><text
								style="color: #9E9E9E;">共{{total}}件</text>合计：<text>￥</text> <text
								style="font-size: 40rpx;">{{totalmoney}}</text></view>
						<view class="info_nav" style="text-align: right;">
							<!-- 共优惠{{amount(inProductlist.price - moneyAfter)}}元 -->
						</view>
					</view>
				</view>

				<view class="footer-btn" @click="$noMultipleClicks(submit)"> 去结算 </view>
				<!-- <view v-else class="footer-btn_s" @click="subledou"> 去结算 </view> -->
			</view>

			<!-- 优惠卷弹窗 -->
			<!-- <u-datetime-picker mode="time" :show="showTime" v-model="timeValue" @confirm="timeConfirm">
				</u-datetime-picker> -->
			<u-popup @touchmove.stop :show="showCoupons" @close="closeCoupons" closeOnClickOverlay mode="bottom"
				style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">

				<view class="store-popup">
					<view class="title flex-between">
						<text>优惠券</text>
						<u-icon @click="closeCoupons1" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
					</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-1">
						<view class="coupons-list" v-if="youhuijuanlist.length" :class="[{ lapse: currentTab === 2 }]">
							<view v-for="(item,index) in youhuijuanlist" :key="index" class="coupons-item flex-between"
								@click="sav_list(item,index)">
								<view class="status pa">
								</view>
								<view class="coupons-list-j" v-if="item.couponType == '满减券'">
									抵用券
								</view>
								<view class="coupons-list-z" v-if="item.couponType == '折扣券'">
									折扣券
								</view>
								<!-- 满减券2 -->
								<view class="left flex-center" v-if="item.couponType == '满减券'">
									<view class="text-center">
										<view class="name">
											{{item.couponName}}
										</view>
										<view class="desc">
											<!-- {{formatDate(item.useEndTime)}} -->
											{{item.useStartTime}}-{{item.useEndTime}}
										</view>
									</view>
								</view>
								<view class="right" v-if="item.couponType == '满减券'">
									<view>¥ <text class="price">{{item.policyAmount}}</text></view>
									<text class="full">满{{item.policyValue}}元可用</text>
									<view class="right_botton">
										去使用
									</view>
								</view>
								<!-- 折扣券 -->
								<view class="left flex-center" v-if="item.couponType == '折扣券'">
									<view class="text-center">
										<view class="name">
											{{item.couponName}}
										</view>
										<view class="desc">
											<!-- {{formatDate(item.useEndTime)}} -->
											{{item.useStartTime}}-{{item.useEndTime}}
										</view>
									</view>
								</view>
								<view class="right" v-if="item.couponType == '折扣券'">
									<view><text class="price">{{item.policyValue}}</text>折</view>
									<!-- <text class="full">满{{item.policyValue}}元可用</text> -->
									<view class="right_botton">
										去使用
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- </view> -->
					<!-- <view class="btn">
							<u-button @click="showCoupons = false" type="primary" shape="circle" size="large" text="确定">
							</u-button>
						</view> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	import cryptoUtils from '@/common/encryption.js';
	export default {
		data() {
			return {
				card_img: this.$https.assetsPath + "image9.png",
				onclickin: true,
				noClick: true,
				num: 1,
				showTime: false,
				showCoupons: false,
				timeValue: `${new Date().getHours()}:${new Date().getMinutes()}`,
				order_remarks: '', //订单备注
				not_use: 0,
				youhuijuanlist: [],
				noticeList: [{
					name: '立即激活',
					id: '1'
				}, {
					name: '暂不激活',
					id: '0'
				}],
				selectItemId: 0,
				payList: [{
						cover: this.$https.assetsPath + "image14.png",
						id: 13,
						name: "微信支付",
						type: "wechat_xcx",
					},
					{
						cover: this.$https.assetsPath + "image15.png",
						id: 14,
						name: "扫呗支付",
						type: "sao_bei",
					},
				],
				payChoose: {},
				e_value: 0,
				card_type: '',
				total: '',
				totalmoney: '',
				list: {},
				open_card:'1'
			};
		},
		// computed: {
		// 	...mapState({

		// 	})
		// },
		onLoad(options) {
			console.log(options, '111')
			this.ids = options.ids
			this.total = options.total
			this.card_type = options.card_type
			this.cardlist()
			this.wechatlist()
		},
		onShow() {},
		methods: {
			wechatlist() {
				index.wechat_pay({
					'type-=': 'ticket'
				}).then(res => {
					if (res.code == 1) {
						this.payList = res.data.rows
					}
				})
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			cardlist() {
				index.cardview({
					ids: this.ids,
					card_type: this.card_type
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
						this.totalmoney = this.amount(this.list.price * this.total)
					}
				})
			},
			change1(e) {
				let that = this
				let i = e.detail.value
				this.e_value = e.detail.value
				const item = this.payList[i]
				if (item) {
					this.payChoose = item
					this.payList[i].checked = true
				} else {
					this.payChoose = {}
				}
			},
			// 关闭弹窗
			onclickfh() {
				this.onclickin = false
			},
			noticesSelect(item, index) {
				this.selectItemId = index
				this.open_card = item.id
				console.log(this.open_card, '222')
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			// 去结算
			submit() {
				this.payList.forEach((item, index) => {
					if (this.e_value == index) {
						this.payChoose = item
					}
				})

				if (this.payChoose.pay_type == '1') {
					this.wechatPay()
				} else if (this.payChoose.type == 'sao_bei') {
					// 调用扫呗支付
					this.saobeipay()
				}
			},
			wechatPay() {
				const params = {
					id: this.ids,
					remark: this.order_remarks,
					total_price: this.totalmoney,
					total_num: this.total,
					pay_type_id: this.payChoose.id,
					card_type: this.list.card_type,
					open_card: this.open_card,
				}
				console.log(params, '111')
				let crypt_data = cryptoUtils.encryptParams(params)
				crypt_data.then(result => {
					index.card_pay({
						crypt_data: result
					}).then(result => {
						console.log(result, '9966')
						let paymentData = result.data
						if (result.code == 1) {
							uni.requestPayment({
								timeStamp: paymentData.timeStamp,
								nonceStr: paymentData.nonceStr,
								package: paymentData.package,
								signType: paymentData.signType,
								paySign: paymentData.paySign,
								success: (res) => {
									uni.showToast({
										title: '购买成功',
										duration: 2000
									});
									setTimeout(() => {
										uni.switchTab({
											url: '../../pages/personal/personal'
										})
									}, 1000)
								},
								fail: (res) => {
									console.log('fail:' + JSON.stringify(res));
									if (res.errMsg = 'requestPayment:fail cancel') {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1, //返回层数，2则上上页
											})
										}, 500)
									}
								},
								complete: () => {
									this.loading = false;
								}
							})
						} else if (result.code == 2) {
							uni.showToast({
								title: '购买成功',
								duration: 2000
							});
							setTimeout(() => {
								uni.switchTab({
									url: '../../pages/personal/personal'
								})
							}, 1000)
						} else if (result.code == -1) {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
							wx.clearStorageSync()
							wx.clearStorage()
							setTimeout(() => {
								uni.switchTab({
									url: '../../pages/personal/personal'
								})
							}, 1000)
						} else if (result.code == 0) {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					})
				});
			},
			saobeipay() {
				console.log(22222)
			},
			// 选择优惠券
			sav_list(item, index) {

			},
			// 优惠券点击事件
			timeConfirm(data) {
				this.showTime = false;
			},
			// 优惠券点击事件
			closeCoupons() {
				this.showCoupons = false;
			},
			// 优惠券点击事件
			closeCoupons1() {
				this.showCoupons = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		background-color: #EBEBEB;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-position: 0% -200rpx;
		position: relative;
		background-size: 100% auto;

		.addressItem {
			display: flex;
			align-items: center;

			.address {
				width: 52upx;
				height: 52upx;
				border-radius: 50%;
				margin-right: 18upx;
				flex: none;
			}

			.address-content {
				flex: 1;
			}
		}

		.section-1 {
			width: 100%;
			border-radius: 7px;

			.tab-list {
				display: flex;
				align-items: flex-end;

				.tab {
					flex: 1;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					height: 60rpx;
					text-align: center;
					position: relative;
					background-color: rgba(199, 218, 254, 1);

					&:first-of-type {
						border-radius: 7px 0 0 0;
						border-bottom-left-radius: 0 !important;
					}

					&:last-of-type {
						border-radius: 0px 7px 0 0;
					}

					&:first-of-type:before {
						content: "";
						display: block;
						position: absolute;
						right: -20rpx;
						z-index: 1;
						bottom: 0;
						border-top: 30rpx solid transparent;
						border-bottom: 30rpx solid white;
						border-left: 10rpx solid white;
						border-right: 10rpx solid transparent;
					}

					&:last-of-type:before {
						content: "";
						display: block;
						position: absolute;
						left: -20rpx;
						z-index: 1;
						bottom: 0;
						border-top: 30rpx solid transparent;
						border-bottom: 30rpx solid white;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid white;
					}
				}

				.active {
					font-weight: bold;
					color: black;
					background-color: white;
					border-radius: 7px 7px 0 7px !important;
					height: 72rpx;
				}
			}

			.tab-con {
				background-color: white;
				padding: 0px 30rpx;
				box-sizing: border-box;
				border-radius: 7px;
				position: relative;
				padding-bottom: 25rpx;
				padding-top: 10rpx;

				.tab-item1 {
					.kong {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 90%;
						font-size: 21rpx;
						color: #999999;

						image {
							width: 200rpx;
						}
					}

					.title {
						font-size: 20rpx;
						font-weight: 500;
						margin-bottom: 20rpx;
						color: #333333;

						/deep/ .u-tag {
							height: 34rpx;
							margin-right: 20rpx !important;
						}
					}

					.adress {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}

					.info {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 20rpx;
					}
				}

				.tab-item2 {
					padding-top: 30rpx;

					.info-1 {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 20rpx;
					}

					.info-2 {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 18rpx;
					}

					.info-3 {
						font-size: 22rpx;
						color: #333333;
						margin-bottom: 30rpx;

						text {
							margin-right: 7rpx;
						}
					}

					.cell {
						border-top: 1px solid #efefef;
						padding: 35rpx 0;

						.label {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
						}

						.value {
							font-size: 26rpx;
							color: #000000;
							margin-right: 15rpx;
						}
					}
				}
			}
		}

		.section-2 {
			height: auto;
			padding: 30rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px 7px 0px 0px;
			width: 100%;

			.goods-detail {
				display: flex;
				overflow: hidden;

				.goods-img {
					width: 160upx;
					height: 160upx;
					flex: none;
					border-radius: 10upx;
				}

				.goods-right {
					flex: 1;
					overflow: hidden;
					margin-left: 24upx;
					display: flex;

					.goods-right-info {
						flex: 1;
						white-space: wrap;

						.goods-top {
							color: #333333;
							font-size: 28upx;
						}

						.goods-pecs {
							font-size: 24upx;
							color: #9E9E9E;
							margin-top: 6upx;
						}
					}

					.goods-right-price {
						.price {
							color: #ff0000;
							font-size: 20upx;

							text {
								font-size: 28upx;
							}
						}

						.goods-num {
							color: #9E9E9E;
							font-size: 20upx;
							text-align: right;
						}
					}
				}
			}

			.title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}

			.goods {
				.con {
					height: 150rpx;

					.image {
						/deep/ .vue-ref {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						margin-left: 30rpx;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-between;

						.info-1 {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
							margin-bottom: 10rpx;
						}

						.info-3 {
							font-size: 22rpx;
							font-weight: 500;
							color: #ff0000;

							text {
								font-size: 28rpx;
								font-weight: 700;
							}
						}
					}
				}

				/deep/ .u-number-box {
					.u-number-box__minus,
					.u-number-box__plus,
					.u-number-box__input {
						width: 45rpx !important;
						font-size: 24rpx !important;
						height: 45rpx !important;

						text {
							font-size: 24rpx !important;
						}
					}

					.u-number-box__input {
						background-color: transparent !important;
					}
				}
			}
		}

		.section-3x {
			padding: 20rpx 30rpx;
			background-color: white;
			border-radius: 0px 0px 7px 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 22rpx;
				font-weight: 500;
				color: #0E9698;

				.minus {
					width: 22px;
					height: 22px;
					border-width: 1px;
					border-color: #E6E6E6;
					border-style: solid;
					border-top-left-radius: 100px;
					border-top-right-radius: 100px;
					border-bottom-left-radius: 100px;
					border-bottom-right-radius: 100px;
					@include flex;
					justify-content: center;
					align-items: center;
				}

				.input {
					padding: 0 10px;
				}

				.plus {
					width: 22px;
					height: 22px;
					background-color: #FF0000;
					border-radius: 50%;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;
				}

				.info-2_tex {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				}

				.info-2_nav {
					font-size: 22rpx;
					font-weight: 500;
					color: #0E9698;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				}
			}
		}

		.section-4x {
			padding: 20rpx 0rpx;
			background-color: white;
			border-radius: 0px 0px 7px 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
			}
		}

		.section-5x {
			padding: 20rpx 0rpx;
			background-color: white;
			border-radius: 0px 0px 7px 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 24rpx;
				font-weight: 500;
				color: #9E9E9E;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			}
		}

		.section-3 {
			padding: 30rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px 7px 7px 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 22rpx;
				font-weight: 500;
				color: #ff0000;

				text {
					font-weight: 700;
					font-size: 28rpx;
				}
			}
		}

		.section-3m {
			padding: 30rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;

			.info-1 {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			.info-2 {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #9E9E9E;
			}
		}

		.form {
			box-sizing: border-box;

			.item {
				padding: 0rpx 30rpx;
				background-color: white;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				.item-con {
					flex: 1;
					width: 0;
					font-size: 26rpx;
					padding: 40rpx 0;
					color: #333333;
					border-bottom: 1px solid #EFEFEF;

					.pirce {
						color: #888888;
					}
				}

				radio {
					transform: scale(0.8);
				}
			}
		}

		.section-4m {
			padding: 30rpx 30rpx;
			background-color: white;

			.info-1 {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.info-2 {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;

				text {
					font-weight: 700;
					font-size: 28rpx;
				}
			}
		}

		.section-5m {
			padding: 30rpx 30rpx;
			background-color: white;

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 0rpx 30rpx 20rpx 30rpx;

				.week-list {
					// display: grid;
					// grid-template-columns: repeat(5, 1fr);
					grid-gap: 60rpx;
					position: relative;
					// width: 200rpx;
					// height: 50rpx;

					.week-item {
						padding: 10rpx 80rpx;
						background-color: rgb(255, 255, 255);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
						border: 2rpx rgba(229, 229, 229, 1.0) solid;
					}

					.active {
						padding: 15rpx 80rpx;
						background-color: rgb(255, 255, 255);
						border-radius: 5rpx;
						text-align: center;
						color: rgba(14, 150, 152, 1);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
						border: 2rpx rgba(14, 150, 152, 1) solid;
					}
				}
			}

			.list {
				margin-top: 20rpx;
				padding: 20rpx 10rpx;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);
				border-radius: 10rpx;

				.item {
					padding: 26rpx 24rpx;
					border-radius: 27rpx;
					border: solid 2rpx rgb(229, 229, 229);

					&+.item {
						margin-top: 30rpx;
					}

					&.active {
						background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391246929552989118.png') left top/100% 100% no-repeat;
						// border: none;
					}

					.text_11 {
						font-size: 28rpx;
						font-weight: 700;
						line-height: 27rpx;
						margin-right: 30rpx;
					}

					.text_12 {
						font-size: 26rpx;
						font-weight: 500;
						line-height: 24rpx;
					}

					.text_13 {
						// font-weight: bold;
						font-size: 26rpx;
						font-weight: 500;
						line-height: 24rpx;
					}
				}
			}

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;

				.info-1_sav {
					font-size: 20rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}

				.info-1_nav {
					font-size: 20rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #0E9698;
				}
			}

			.info-2 {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #E84545;
			}
		}

		.section-x {
			background-color: white;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 22rpx;
				font-weight: 500;
				color: #ff0000;

				text {
					font-weight: 700;
					font-size: 28rpx;
				}
			}
		}

		.section-4 {
			padding: 40rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 26rpx;
				color: #bebebe;
				margin-left: 30rpx;
			}

			.active {
				color: #ff0000 !important;
			}

			.info-3 {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				margin-right: 10rpx;
			}
		}

		.section-5f {
			padding: 40rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 26rpx;
				color: #bebebe;
				margin-left: 30rpx;
			}

			.info-3 {
				font-size: 28rpx;
				font-weight: 500;
				color: #ff0000;
				margin-right: 10rpx;
			}
		}

		.section-5 {
			position: fixed;
			bottom: 134rpx;
			z-index: 999;

			.info-1 {
				font-size: 32rpx;
				font-weight: 500;
				color: #999999;
			}

			.info-2 {
				color: #0E9698;
			}
		}

		.footer {
			background: #ffffff;
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;

			.footer-1 {
				font-size: 28rpx;
				color: #333333;

				.info {
					font-size: 22rpx;
					color: #ff0000;

					.info_info {

						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #ff0000;
					}

					.info_nav {
						font-size: 22rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #ff0000;
					}
				}
			}

			.footer-btn {
				padding: 20rpx 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #ffffff;
				// background: linear-gradient(0deg, #0E9698, #0E9698);
				background-color: #0E9698;
				border-radius: 40rpx;
			}

			.footer-btn_s {
				padding: 20rpx 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #ffffff;
				// background: linear-gradient(0deg, #0E9698, #0E9698);
				background-color: #cacaca;
				border-radius: 40rpx;
			}
		}

		.store-popup {
			padding: 20rpx 0;

			.coupons-list {
				padding: 20rpx 40rpx;

				.coupons-list-j {
					width: 112rpx;
					height: 40rpx;
					background: linear-gradient(240deg, #FE3124 0%, #FE7726 100%);
					border-radius: 12rpx 0rpx 104rpx 0rpx;
					opacity: 1;
					position: absolute;
					top: 0;
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
					line-height: 40rpx;
				}

				.coupons-list-z {
					width: 112rpx;
					height: 40rpx;
					background: linear-gradient(240deg, #FE3124 0%, #FE7726 100%);
					border-radius: 12rpx 0rpx 104rpx 0rpx;
					opacity: 1;
					position: absolute;
					top: 0;
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
					line-height: 40rpx;
				}

				&.lapse {
					.left {
						color: #bebebe;
					}
				}
			}

			.coupons-item {
				background-color: #f1f1f1;
				border-radius: 16rpx;
				padding: 20rpx 0;
				position: relative;
				overflow: hidden;

				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					background-color: #f7f7f7;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					transform: translateY(-50%);
				}

				&::before {
					left: 0;
					transform: translate(-50%, -50%);
				}

				&::after {
					right: 0;
					transform: translate(50%, -50%);
				}

				&+.coupons-item {
					margin-top: 20rpx;
				}

				.status {
					bottom: -30rpx;
					right: 30%;
					width: 116rpx;
					height: 116rpx;
					background-position: left bottom;
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				.left {
					width: 70%;
					color: #f63043;
					font-size: 28rpx;

					.name {
						width: 100%;
						height: 52rpx;
						font-size: 36rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						line-height: 52rpx;
					}

					.desc {
						margin-top: 10rpx;
						width: 100%;
						height: 28rpx;
						font-size: 20rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #A8A8A8;
						line-height: 28rpx;

						.text_text {
							margin-left: 10rpx;
						}
					}
				}

				.right {
					flex: 1;
					color: #0E9698;

					.price {
						width: 76rpx;
						height: 50rpx;
						font-size: 48rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 500;
						color: #0E9698;
						line-height: 50rpx;
					}

					.full {
						width: 94rpx;
						height: 28rpx;
						font-size: 20rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #A8A8A8;
						line-height: 28rpx;
						margin-top: -20rpx;
					}

					.right_botton {
						width: 136rpx;
						height: 48rpx;
						background: #0E9698;
						border-radius: 312rpx 312rpx 312rpx 312rpx;
						opacity: 1;
						color: #FFFFFF;
						font-size: 20rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						text-align: center;
						line-height: 48rpx;
						margin-top: 10rpx;
					}

				}
			}

			.scroll-view_H {}

			.item {
				margin-top: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;

				.clo {
					color: #0E9698;
				}
			}



			.list-1 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 200rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: #ffeae9;
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						border-right: 1px dashed #ff1c1c;
						justify-content: center;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							top: -15rpx;
							right: -15rpx;
						}

						&::after {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							bottom: -15rpx;
							right: -15rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #ff1c1c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #ff1c1c;
							margin-top: 10rpx;
						}
					}

					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}

			.list-12 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 100rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: #ffeae9;
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						border-right: 1px dashed #ff1c1c;
						justify-content: center;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							top: -15rpx;
							right: -15rpx;
						}

						&::after {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							bottom: -15rpx;
							right: -15rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #ff1c1c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #ff1c1c;
							margin-top: 10rpx;
						}
					}

					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}

			.list-2 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 222rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: rgba(14, 150, 152, 0.2);
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #0E9698;

							text {
								font-size: 50rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: rgba(14, 150, 152, 0.6);
							margin-top: 10rpx;
						}
					}

					.item-11 {
						background: #ccccce;
						width: 30%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #6c6c6c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #6c6c6c;
							margin-top: 10rpx;
						}
					}


					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							margin-bottom: 10rpx;
						}

						.info-2 {
							font-size: 24rpx;
							margin-bottom: 8rpx;
							color: #bebebe;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}

			.btn {
				padding: 0px 30rpx;
				margin-top: 20rpx;
			}
		}

		.scrolllist {
			position: fixed;
			z-index: 999;
			color: #000000;
			width: 74%;
			height: 50%;
			background-color: #fff;
			left: 13%;
			top: 20%;
			border-radius: 20rpx;


			.toubu {
				width: 100%;
				height: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				margin-top: 10rpx;
				// position: absolute;
				// top: 10rpx;
			}

			.scroll {
				position: absolute;
				z-index: 999;
				color: #000000;
				width: 100%;
				height: 45vh;
				background-color: #fff;
				left: 0;
				top: 70rpx;
				border-radius: 10rpx;

				.fanhui {
					width: 35%;
					height: 80rpx;
					background: #0E9698;
					border-radius: 40rpx;
					text-align: center;
					line-height: 80rpx;
					color: #fff;
					margin: 0 auto;
					font-size: 30rpx;
					margin-top: 20rpx;

				}

				.lingqu {
					color: rgba(224, 37, 27, 1);
					font-size: 28rpx;
					text-align: left;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}

				.xiangqing {
					width: 97%;
					height: auto;
					overflow-wrap: break-word;
					color: rgba(0, 0, 0, 1.0);
					font-size: 28rpx;
					font-weight: 500;
					text-align: left;
					line-height: 34rpx;
					margin: 10rpx 0 0 20rpx;
					padding-right: 20rpx;
				}
			}
		}
	}
</style>